<template>
    <el-form :model="editForm">
        <el-form-item label="name">
            <el-input  v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="gender">
            <el-radio-group  v-model="editForm.gender">
                <el-radio label="男" size="small">
                    男
                </el-radio>
                <el-radio label="女" size="small">
                    女
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="age">
            <el-slider  v-model="editForm.age" show-input />
        </el-form-item>
    </el-form>

    <el-button @click="submit">提交修改</el-button>

</template>

<script setup>
import {getStudentMessage,updateMessageStudent} from '../API/ApiMethod'
import { ElForm, ElMessage } from 'element-plus';
import { reactive, ref, watch,defineProps } from "vue";
components:{
    ElForm
}
const props=defineProps({
    studentId:{
        require:true
    }
})
if(props.studentId!=''){
    getStudentMessage(props.studentId).then(res=>{
       if(res.code==10000){
          editForm.name=res.data.s_name
          editForm.age=res.data.s_age
          editForm.gender=res.data.s_gender
       }
    })
}
const editForm = reactive({
    name: '',
    age: 0,
    gender: ''
})

function submit(){
    updateMessageStudent(props.studentId,editForm.age,editForm.name,editForm.gender).then(res=>{
       if(res.code==10000){
        ElMessage({
            type:'success',
            message:'更新成功'
        })
       }else{
        ElMessage({
            type:'danger',
            message:'未知错误'
        })
       }
    })
}


</script>

<style>

</style>